<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Games:  Box Puzzle</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="description" CONTENT="(Internet Explorer Only)  Move the squares using the arrow keys to get them in the correct order.  Fun!">
<META NAME="date" CONTENT="2000-11-14">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="John Chacko">
<META NAME="section" CONTENT="Games">
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  John Chacko (johns221b@yahoo.com) -->
<!-- Web Site:  http://holmes221b.50megs.com -->




<!-- Begin
var blank_pos = 16, count = 0, pos = new Array(), nam = new Array();
pos[1] = 7;
pos[2] = 10;
pos[3] = 14;
pos[4] = 9;
pos[5] = 12;
pos[6] = 2;
pos[7] = 13;
pos[8] = 1;
pos[9] = 8;
pos[10] = 5;
pos[11] = 4;
pos[12] = 6;
pos[13] = 3;
pos[14] = 11;
pos[15] = 15;
function start() {
nam[1] = L1.style;
nam[2] = L2.style;
nam[3] = L3.style;
nam[4] = L4.style;
nam[5] = L5.style;
nam[6] = L6.style;
nam[7] = L7.style;
nam[8] = L8.style;
nam[9] = L9.style;
nam[10] = L10.style;
nam[11] = L11.style;
nam[12] = L12.style;
nam[13] = L13.style;
nam[14] = L14.style;
nam[15] = L15.style;
document.onkeydown = keyDown;
}
function keyDown() {
var ieKey = event.keyCode;
if (ieKey == 38) {
if (blank_pos < 13) {
count=blank_pos + 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z - 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
   }
}
else if (ieKey == 40) {
if (blank_pos > 4) {
count = blank_pos - 4;
X = fun(count);
Z = (parseInt(nam[X].top));
nam[X].top = Z + 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
   }
}
else if (ieKey == 37) {
r = blank_pos % 4
if (r == 0) {
}
else {
count = blank_pos + 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z - 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
   }
}
else if (ieKey == 39) {
ch = blank_pos + 3;
r = ch % 4;
if (r == 0) {
}
else {
count = blank_pos - 1;
X = fun(count);
Z = (parseInt(nam[X].left));
nam[X].left = Z + 52;
Q = pos[X];
pos[X] = blank_pos;
blank_pos = Q;
   }
}
else {
alert("PLEASE USE PROPER KEYS");
}
A = false;
b = 0;
for (i = 1; i < 16; i++) {
b++;
if (pos[i] == b) {
A = true;
}
else {
A = false;
break;
   }
}
if (A)alert("CONGRATULATIONS");
}
function fun(count) {
for (var i = 1; i < 16; i++) {
if (pos[i] == count) {
var X = i;
   }
}
return X;
}
//  End -->
</script>

</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff onLoad="start()">

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /games/"><font color="#FF0000"><b>Games</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Box Puzzle</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
(Internet Explorer Only)  Move the squares using the arrow keys to get them in the correct order.  Fun!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<div ID="L8" STYLE="position:absolute; left:202px; top:302px; width:50px; height:50px; background-color:green;">
<br><b><center>8</center>
</div>
<div ID="L6" STYLE="position:absolute; left:254px;top:302px; width:50px; height:50px; background-color:green;">
<br><b><center>6</center>
</div>
<div ID="L13" STYLE="position:absolute; left:306px;top:302px; width:50px; height:50px; background-color:green;">
<br><b><center>13</center>
</div>
<div ID="L11" STYLE="position:absolute; left:358px;top:302px; width:50px; height:50px; background-color:green;">
<br><b><center>11</center>
</div>
<div ID="L10" STYLE="position:absolute; left:202px; top:354px; width:50px; height:50px; background-color:green;">
<br><b><center>10</center>
</div>
<div ID="L12" STYLE="position:absolute; left:254px;top:354px; width:50px; height:50px; background-color:green;">
<br><b><center>12</center>
</div>
<div ID="L1" STYLE="position:absolute; left:306px;top:354px; width:50px; height:50px; background-color:green;">
<br><b><center>1</center>
</div>
<div ID="L9" STYLE="position:absolute; left:358px;top:354px; width:50px; height:50px; background-color:green;">
<br><b><center>9</center>
</div>
<div ID="L4" STYLE="position:absolute; left:202px; top:406px; width:50px; height:50px; background-color:green;">
<br><b><center>4</center>
</div>
<div ID="L2" STYLE="position:absolute; left:254px;top:406px; width:50px; height:50px; background-color:green;">
<br><b><center>2</center>
</div>
<div ID="L14" STYLE="position:absolute; left:306px;top:406px; width:50px; height:50px; background-color:green;">
<br><b><center>14</center>
</div>
<div ID="L5" STYLE="position:absolute; left:358px;top:406px; width:50px; height:50px; background-color:green;">
<br><b><center>5</center>
</div>
<div ID="L7" STYLE="position:absolute; left:202px; top:458px; width:50px; height:50px; background-color:green;">
<br><b><center>7</center>
</div>
<div ID="L3" STYLE="position:absolute; left:254px;top:458px; width:50px; height:50px; background-color:green;">
<br><b><center>3</center>
</div>
<div ID="L15" STYLE="position:absolute; left:306px;top:458px; width:50px; height:50px; background-color:green;">
<br><b><center>15</center>
</div>
<P>
<P>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
